<template>
    <view class="w-process">
        <view
                :class="{'w-process-node': true, 'w-cmt-node': (node.comment && node.comment.length > 0) || node.signature}"
                v-for="(node, index) in (progress || [])" :key="index">
            <view class="w-process-item-line"></view>
            <view class="w-process-item">
                <view class="w-process-item-avatar">
                    <avatar v-if="!node.users" :size="42" :status="getStatus(node)" :name="node.user.name"
                            :src="node.user.avatar" :showName="false"></avatar>
                    <uni-icons class="w-node-and-avatar" size="32" color="#ffffff" v-else
                               type="staff-filled"></uni-icons>
                </view>

                <view class="w-p-text-info">
                    <view>{{ $t(node.name) }}</view>
                    <view>{{ getDesc(node) }}</view>
                </view>
                <text class="w-p-time">
                    {{ node.isFuture ? $t('webAuto.Waiting') : getFinishTime(node.finishTime) }}
                </text>
            </view>
            <view class="w-process-node-content">
                <view v-if="node.users" class="w-process-node-users">
                    <avatar :size="32" v-for="sn in node.users" showY :status="getStatus(sn)" :name="sn.user.name"
                            :src="sn.user.avatar" :key="sn.user.name"></avatar>
                </view>
                <view class="w-comments" v-show="(node.comment && node.comment.length > 0) || node.signature">
                    <view v-if="(node.signature || '') !== ''"
                          style="display: flex; align-items: flex-start; margin-bottom: 5px;">
                        <text>{{$t('webAuto.sign')}}</text>
                        <image mode="aspectFit" :src="node.signature" style="width: 150rpx; height: 100rpx;"></image>
                    </view>
                    <view v-for="cmt in node.comment" :key="cmt.id">
                        <view v-if="node.users" class="w-process-node-user">
                            <avatar :size="28" :name="cmt.user.name" :src="cmt.user.avatar"></avatar>
                        </view>
                        <view class="w-comment">
                            <view>{{ cmt.text }}</view>
                            <template v-if="cmt.attachments.length > 0">
                                <view>
                                    <image mode="aspectFit" :src="img" v-for="(img, i) in filterImages(cmt.attachments)"
                                           :key="img" @click="previewImg(img, cmt.attachments)"></image>
                                </view>
                                <view>
                                    <uni-link :showUnderLine="false" color="#4C87F3" :download="file.name"
                                              v-for="(file, i) in filterFiles(cmt.attachments)" :key="file.id"
                                              :href="file.url" :text="file.name"></uni-link>
                                </view>
                            </template>
                            <text class="w-comment-time" v-show="node.comment.length > 1">
                                {{ getFinishTime(cmt.createTime) }}
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最后的审批状态 -->
        <view class="w-process-end w-process-item" v-if="status !== $t('webAuto.Approved')">
            <view :style="{ width: 50 / 16 + 'rem', height: 50 / 16 * 0.8 + 'rem' }">
                <uni-icons :size="30" type="more-filled" color="#8b8b8b" class="w-pr-running"
                           v-if="result === 'RUNNING'"></uni-icons>
                <uni-icons :size="30" type="checkbox-filled" color="#5FB685" class="w-pr-status"
                           v-else-if="result === 'PASS'"></uni-icons>
                <uni-icons :size="30" type="clear" color="#CE5266" class="w-pr-status"
                           v-else-if="result === 'REFUSE'|| result === 'ANCELLATION'"></uni-icons>
                <uni-icons :size="30" type="close" color="#8b8b8b" class="w-pr-status"
                           v-else-if="result === 'CANCEL'"></uni-icons>
            </view>
            <view>{{ status }}</view>
        </view>
        <view v-else class="pass">
            <uni-icons :size="30" type="checkbox-filled" color="#5FB685" class="pass-icon w-pr-status"
                       style="margin-top:5rpx"
            ></uni-icons>
            <text class="pass-text">{{ status }}</text>
        </view>
    </view>
</template>

<script setup>
import Avatar from '@/components/Avatar.vue'
import {ref} from 'vue';
import {getTaskResult} from '@/utils/ProcessUtil.js'
import {getRes, getFileSize} from '@/utils/tool.js'

const props = defineProps(['progress', 'status', 'result'])

const imgViews = ref([])
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

function getFinishTime(time) {
    if (time) {
        return time.substring(5, 16)
    }
    return t('webAuto.Processing')
}

function filterImages(attachments) {
    return (attachments || []).filter(f => f.isImage).map(f => {
        return getRes(f.url)
    })
}

function filterFiles(attachments) {
    return (attachments || []).filter(f => !f.isImage).map(f => {
        return {
            ...f,
            url: getRes(f.url)
        }
    })
}

function previewImg(img, attachments) {
    const imgs = filterImages(attachments)
    uni.previewImage({
        current: imgs.indexOf(img),
        urls: imgs,
        longPressActions: true
    })
}

function getDesc(item) {
    if (item.nodeType === 'APPROVAL') {
        if (item.user) {
            return `${item.user.name}（${getTaskResult(item).text}）`
        }
        let desc = (item.users || []).length + t('webAuto.people')
        switch (item.approvalMode) {
            case 'AND':
                return desc + t('webAuto.countersign')
            case 'OR':
                return desc + t('webAuto.OrSign')
            case 'NEXT':
                return desc + t('webAuto.SequentialSignature')
        }
    } else if (item.nodeType === 'CC') {
        if (item.user) {
            return `${t('flow.copy')} ${item.user.name}`
        }
        return `${t('flow.copy')} ${item.users.length}${t('webAuto.people')}`
    } else if (item.nodeType === 'SUBPROC') {
        switch (item.result) {
            case 'agree':
                return `${item.user.name} ${t('webAuto.SubProcessInitiated')}`;
            case 'cancel':
                return `${item.user.name} ${t('webAuto.InitiatedRevoked')}`;
            case 'refuse':
                return `${item.user.name} ${t('webAuto.InitiatedRejected')}`;
            default:
                return `${item.user.name} ${t('webAuto.InitiatedCurrently')}`;
        }
    } else if (item.result === 'comment') {
        return `${item.user.name}${t('webAuto.AddedComments')}`
    } else {
        return item.user?.name
    }
}

function getStatus(item) {
    if (item.isFuture) {
        return 'waiting'
    } else if (item.finishTime === null) {
        return 'pending'
    } else if (item.nodeType === 'CC') {
        return 'cc'
    } else if (item.result === 'agree' || item.result === 'complete') {
        return 'success'
    } else if (item.result === 'refuse') {
        return 'error'
    } else if (item.result === 'comment') {
        return 'comment'
    } else if (item.result === 'transfer') {
        return 'transfer'
    } else if (item.result === 'recall') {
        return 'recall'
    } else if (item.nodeType === 'cancel') {
        return 'cancel'
    } else {
        return undefined
    }
}
</script>

<style lang="less" scoped>
.w-process {
  font-size: 32 rpx;

  .w-process-node {
    position: relative;
    padding-bottom: 64rpx;

    //连接线
    .w-process-item-line {
      background-color: #E4E4E4;
      position: absolute;
      width: 6 rpx;
      height: 100%;
      left: 40 rpx;
    }

    //节点体
    .w-process-node-content {
      margin-left: 100rpx;
      display: flex;
    
      .w-process-node-users {
        margin-top: 10rpx;
        display: grid;
        grid-template-columns: repeat(6, 100 rpx);
      }
      .w-comments{
        .w-process-node-user{
            height: 0!important;
        }
        .w-comment{
            height: auto;
            line-height: 60rpx;
            .w-comment-time{
                display: none;
                margin-top: 10rpx;
            }
        }
      }
    }
  }

  .w-process-item {
    display: flex;
    position: relative;

    .w-process-item-avatar {
      padding: 10rpx 0;
      background-color: white;
      border-radius: 50%;

      .w-node-and-avatar {
        padding: 12rpx;
        border-radius: 50%;
        background-color: #5797ff;
      }
    }

    .w-p-text-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 16rpx;

      & > view:first-child {
        font-size: 29rpx;
        color: #8C8C8C;
      }

      & > view {
        padding: 3rpx;
      }
    }

    .w-p-time {
      position: absolute;
      color: #8C8C8C;
      font-size: 30rpx;
      top: 10rpx;
      right: 0;
    }
  }

  .w-process-end {
    display: flex;
    align-items: center;
    padding: 3rpx;

    & > view:first-child {
      display: flex;
      background-color: white;
    }

    .w-pr-running {
      width: 80%;
      height: 100%;
      background-color: #E4E4E4;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .w-pr-status {
      width: 80%;
      height: 100%;
    }
  }
}

.w-comments {
  margin-top: 10rpx;
  padding: 16rpx;
  background-color: #F4F5F7;
  border-radius: 0 16rpx 16rpx 16rpx;

  .w-comment {
    margin-bottom: 10 rpx;
    padding: 10 rpx;
    position: relative;
    color: #515151;
    background-color: #F4F5F7;
    border-radius: 0 16rpx 16rpx 16rpx;

    image {
      margin: 2px;
      width: 112rpx;
      height: 112rpx;
    }

    & > view:first-child {
      font-size: 29rpx;
      color: #515151;
      margin-bottom: 6 rpx;
    }

    .w-comment-time {
      right: 10rpx;
      top: 10rpx;
      color: #a8a8a8;
      font-size: small;
      position: absolute;
    }
  }
}

.w-cmt-node {
  padding-bottom: 16rpx !important;
}

.pass {
  background-color: #f0f9eb;
  color: #67C23A;
  margin: 30rpx 0 0 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16rpx 32rpx;
  text-align: center;
  position: relative;
  height:60rpx;
}

.pass-icon {
  position: absolute !important;
  top: 6rpx;
  left: 36%;
}

.pass-text {
  position: absolute;
  top: 20rpx;
  left: 45%;
}
</style>
